import React from "react";
import { toJS } from "mobx";
import loadjs from "loadjs";
import { Result } from "weaver-mobile";
import Loading from "../../../common/loading";

export default class AppChartView extends React.Component {
  state = {
    loaded: false
  };

  componentDidMount() {
    this.loadMobileChartView();
  }

  componentWillUnmount() {
    const { timer } = this.props;

    timer.clear();
  }

  loadMobileChartView() {
    const MOD_NAME = 'weaEdcBoard4Mobile';

    if (loadjs.isDefined(MOD_NAME)) {
      this.setState({ loaded: true });
    } else {
      const LIB_URL = '/spa/edc/static4engine/board4mobile';

      loadjs(
        [
          `${LIB_URL}/index.js`,
          `${LIB_URL}/index.css`,
          '/mobilemode/js/echarts4/echarts.min.js'
        ],
        MOD_NAME,
        {
          success: () => {
            this.setState({ loaded: true });
          }
        }
      )
    }
  }

  render() {
    const { noChart, widgets, theme, loading, timer } = this.props;
    const coms = window.weaEdcBoard4Mobile;

    if (!this.state.loaded || loading) {
      return (
        <Loading loading={true} content='正在加载...' />
      );
    }

    if (noChart) {
      return (
        <Result
          imgUrl='/edc/images/mobile/no_chart.png'
          title='暂无图表'
          message='请尝试在pc端添加新图表'
        />
      );
    }

    if (!coms) return null;

    const w = toJS(widgets);

    return (
      <coms.MobileChartView widgets={w} theme={theme} timer={timer} />
    );
  }
}